<template>
  <div class="home-page">
    <HomeTopBanner></HomeTopBanner>
    <section class="all-product">
      <div class="all-product-content">
        <div
          :class="{
            active: activeObj[1],
          }"
          class="title-wrap"
        >
          <div class="yellow-wrap">Product</div>
          <div class="title">全部商品 一件可定</div>
        </div>
        <div class="list-wrap">
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
          <div class="list-item"></div>
        </div>
      </div>
    </section>
    <section class="home-swiper">
      <div
        :class="{
          active: activeObj[2],
        }"
        class="title-wrap"
      >
        <div class="yellow-wrap">IP Cooperation</div>
        <div class="title">IP官方周边供应商 品质保证</div>
      </div>
      <Swiper
        class="ip-swiper"
        :loop="true"
        :freeMode="true"
        :speed="5000"
        :modules="modules"
        :autoplay="{
          delay: 200,
          disableOnInteraction: false,
          loopPreventsSlide: true,
        }"
        :slides-per-view="6"
        :space-between="30"
      >
        <template :key="index" v-for="(item, index) in 20">
          <SwiperSlide>
            <el-image
              :src="'https://q01.yinge.cc/resource/2023/03/09/fc89ac9c-aa96-40ef-8279-6ed720646b50.jpg?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1'"
            >
            </el-image>
          </SwiperSlide>
        </template>
      </Swiper>
    </section>
    <section class="platform-wrap">
      <div class="title-wrap">
        <div class="yellow-wrap">Express delivery</div>
        <div class="title">支持各大平台一件代发 低至2.5元/单</div>
      </div>
      <div class="list">
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
        <div class="img-wrap"></div>
      </div>
    </section>
    <section class="product-render">
      <div class="title-wrap">
        <div class="yellow-wrap">Product Renderin</div>
        <div class="title">一键自动生成商品高清实拍图</div>
      </div>
      <div class="render-content">
        <Swiper
          :modules="modules"
          :pagination="{ clickable: true }"
          class="pr-swiper"
          :slides-per-view="1"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <template :key="index" v-for="(item, index) in productRender">
            <SwiperSlide>
              <el-image :src="item"> </el-image>
            </SwiperSlide>
          </template>
        </Swiper>
        <div class="product-list">
          <template :key="item" v-for="item in 6">
            <div class="list-items">
              <el-image :src="productRender[swiperAcIndex]"> </el-image>
            </div>
          </template>
        </div>
      </div>
    </section>
    <section class="home-appraise">
      <div class="title-wrap">
        <div class="yellow-wrap">Appraise</div>
        <div class="title">来自客户的心声</div>
      </div>
      <div class="content">
        <div class="artist-item"></div>
        <div class="artist-item"></div>
        <div class="artist-item"></div>
      </div>
    </section>
    <section class="home-steps">
      <div class="title-wrap">
        <div class="yellow-wrap">Product online</div>
        <div class="title">10分钟 传图到上架开售</div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Autoplay, FreeMode, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import 'swiper/css/pagination'
const modules = [Autoplay, FreeMode, Pagination]

import HomeTopBanner from './HomeTopBanner.vue'
import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'

const props = defineProps(['scorllVal'])
const { scorllVal } = toRefs(props)
const activeObj = reactive({
  0: false,
  1: false,
  2: false,
})
watch(
  scorllVal,
  (newVal) => {
    if (newVal >= 0) {
      activeObj[0] = true
      activeObj[1] = true
    }
    if (newVal >= 720) {
      activeObj[2] = true
    }
  },
  {
    immediate: true,
  }
)

const productRender = reactive([
  'https://q01.yinge.cc/resource/2023/03/09/c7dc5f87-0546-4fc9-b5cb-1cf454c49d26.jpg?imageMogr2/auto-orient/format/webp/thumbnail/!600x600r/interlace/1/ignore-error/1',
  'https://q01.yinge.cc/resource/2023/03/09/4acef230-ed0f-48ec-940e-bcf9318da893.jpg?imageMogr2/auto-orient/format/webp/thumbnail/!600x600r/interlace/1/ignore-error/1',
  'https://q01.yinge.cc/resource/2023/03/09/87eb1c9c-44f6-4992-9a87-0f5b51526d9a.jpg?imageMogr2/auto-orient/format/webp/thumbnail/!600x600r/interlace/1/ignore-error/1',
])
let swiperAcIndex = ref(0)
const onSwiper = (swiper) => {}
const onSlideChange = (el) => {
  console.log('slide change', el.activeIndex)
  swiperAcIndex.value = el.activeIndex
}
onMounted(() => {})
</script>

<style lang="scss" scoped>
.home-page {
  .all-product {
    width: 100%;
    min-width: 1180px;
    height: 820px;
    margin-top: -100px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background: rgb(255, 255, 255);
    border-radius: 80px 80px 0px 0px;
    .all-product-content {
      width: 1180px;
      height: 100%;
      .list-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        min-width: 1180px;
        margin-top: 40px;
        .list-item {
          flex-shrink: 0;
          width: 220px;
          height: 220px;
          background: linear-gradient(180deg, #f3f3f0 0%, #f8f8f5 100%);
          border-radius: 20px;
          margin-top: 20px;
          position: relative;
          cursor: pointer;
          overflow: hidden;
        }
      }
    }
  }
  .home-swiper {
    width: 100%;
    min-width: 1180px;
    height: 870px;
    background-image: url('https://q01.yinge.cc/resource/2023/03/09/ce50e5ff-807a-42c7-a1c0-769ace7889fd.jpeg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    .ip-swiper {
      margin-top: 66px;
      -webkit-transition-timing-function: linear; /*之前是ease-out*/
      -moz-transition-timing-function: linear;
      -ms-transition-timing-function: linear;
      -o-transition-timing-function: linear;
      transition-timing-function: linear;
    }
  }
  .platform-wrap {
    width: 100%;
    min-width: 1180px;
    height: 680px;
    background: #f7f8fa;
    overflow: hidden;
    .list {
      width: 1200px;
      margin: 28px auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      > div {
        margin-left: 20px;
        display: flex;
        width: 220px;
        height: 140px;
        background: #ffffff;
        border-radius: 20px;
        margin-top: 20px;
      }
    }
  }
  .product-render {
    width: 100%;
    min-width: 1180px;
    height: 870px;
    background: #fff;
    overflow: hidden;
    .render-content {
      display: flex;
      width: 1180px;
      margin: 60px auto 0;
      .pr-swiper {
        width: 460px;
        height: 460px;
        border-radius: 20px;
        margin-left: 0;
      }
      .product-list {
        display: flex;
        flex-wrap: wrap;
        width: 720px;
        .list-items {
          width: 220px;
          height: 220px;
          background: #f1f5f6;
          border-radius: 20px;
          margin-left: 20px;
        }
      }
    }
  }
  .home-appraise {
    width: 100%;
    min-width: 1180px;
    height: 870px;
    background: url(https://q01.yinge.cc/resource/2023/03/09/03832cce-566c-4f58-a549-182ec2fb87cd.jpeg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      .artist-item {
        position: relative;
        width: 360px;
        height: 483px;
        margin: 90px 20px 0;
        background: #ffffff;
        border-radius: 8px;
      }
    }
  }
  .home-steps {
    width: 100%;
    min-width: 1180px;
    height: 644px;
    background: #fff;
    overflow: hidden;
  }
  .title-wrap {
    &.active {
      animation: titleAni 1s forwards;
    }
    .yellow-wrap {
      font-size: 16px;
      font-weight: 600;
      color: #ffd415;
      margin-top: 86px;
      text-align: center;
    }
    .title {
      font-size: 40px;
      font-weight: 600;
      color: #121212;
      text-align: center;
      margin-top: 18px;
    }
  }
  @keyframes titleAni {
    0% {
      transform: translateY(60px);
    }
    100% {
      transform: translateY(0);
    }
  }
}
</style>
